<template>
    <div id="paramter_list">
      <div class="search-box">
        <Row type="flex">
          <Row type="flex" justify="start" class="search-item-left">
            <Col class="search-item"><span class="search-label">输入搜索：</span><Input placeholder="参数编码/参数名称" v-model='searchName'></Input></Col>
            <Col class="search-item">
              <Button class="search-btn" type='primary' @click="doSearch">查询</Button>
            </Col>
            <Col class="search-item">
              <Button class="search-btn" @click="reset">重置</Button>
            </Col>
          </Row>
          <Row type="flex" justify="end" class="search-item-right">
            <Col class="search-item"><Button class="search-btn" type="primary" style="margin-right:8px" @click="skipAdd" v-if="hasPermission('moms:product:paramcreate')">添加参数</Button></Col>
          </Row>
        </Row>
      </div>
      <Table stripe class="table-list" :columns="columns" :data="tableData" :loading="loading" :height="tableHeight">
        <template slot-scope="{ row }" slot="brandName">
          <span>{{row.inputType === 0 ? '手动录入' : row.inputType === 1 ? '单选参数': row.inputType === 2 ? '多选参数': ''}}</span>
        </template>
        <template slot-scope="{ row }" slot="action">
          <i class="iconsys iconedit" title="编辑" @click='skipEdit(row)' v-if="hasPermission('moms:product:paramupdate')"></i>
          <Poptip confirm title="确认删除此数据吗？" transfer @on-ok="sureDel(row)" style="text-align:left">
            <i class="iconsys icondel" title="删除" v-if="hasPermission('moms:product:paramdelete')"></i>
          </Poptip>
        </template>
      </Table>
      <Row type='flex' justify="end" style='padding: 20px'>
        <Col>
          <Page :total="pageObj.total"
                :page-size='pageObj.pageSize'
                :current='pageObj.pageIndex'
                :page-size-opts='[20,50,100,200]'
                show-total
                show-sizer
                @on-change='changePageIndex'
                @on-page-size-change='changePageSize' />
        </Col>
      </Row>
    </div>
  </template>

<script>
import { getParamsList, delParams } from '@/api/commondity/index'
export default {
  name: 'paramter_list',
  computed: {
    tableHeight () {
      let height = this.tableData.length > 10 ? 520 : 0
      return height
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (vm.packageId !== to.params.id) {
        vm.packageId = to.params.id
      }
      vm.getData()
    })
  },
  data () {
    return {
      packageId: '',
      loading: false,
      searchName: '',
      searchObj: {
        searchName: ''
      },
      pageObj: {
        total: 0,
        pageIndex: 1,
        pageSize: 20
      },
      tableData: [
        {
          order: '11',
          id: '3'
        }
      ],
      columns: [
        // {
        //   title: '排序',
        //   key: 'order',
        //   sortable: true
        // },
        {
          title: '编号',
          key: 'propNameId'
        },
        {
          title: '参数名称',
          key: 'propName'
        },
        {
          title: '属性名称',
          key: 'packageName'
        },
        {
          title: '参数录入方式',
          slot: 'brandName'
        },
        {
          title: '可选值列表',
          key: 'valuesCollect'
        }
        // {
        //   title: '操作',
        //   slot: 'action',
        //   width: 200
        // }
      ]
    }
  },
  methods: {
    doSearch () {
      this.searchObj.searchName = this.searchName
      this.pageObj.pageIndex = 1
      this.getData()
    },
    reset () {
      this.searchObj.searchName = ''
      this.searchName = ''
      this.pageObj.pageIndex = 1
      this.pageObj.pageSize = 20
      this.getData()
    },
    changePageIndex (index) {
      this.pageObj.pageIndex = index
      this.getData()
    },
    changePageSize (size) {
      this.pageObj.pageSize = size
      this.pageObj.pageIndex = 1
      this.getData()
    },
    skipAdd () {
      this.$router.push({ name: 'add_paramter', query: { id: this.packageId } })
    },
    skipEdit (row) {
      this.$router.push({ name: 'edit_paramter', params: { id: row.propNameId }, query: { id: this.packageId } })
    },
    sureDel (row) {
      delParams({
        merchantId: this.$store.state.user.merchantId,
        propNameId: row.propNameId
      }).then(res => {
        if (res.data.status === 200) {
          this.$Message.success('删除成功!')
          this.getData()
        } else {
          this.$Message.error(`${res.data.error}`)
        }
      })
    },
    getData () {
      this.loading = true
      getParamsList({
        merchantId: this.$store.state.user.merchantId,
        searchKey: this.searchObj.searchName,
        packageId: this.packageId,
        offset: this.pageObj.pageSize * (this.pageObj.pageIndex - 1),
        limit: this.pageObj.pageSize
      }).then(res => {
        this.loading = false
        const result = res.data || {}
        if (result.status === 200) {
          this.tableData = result.data || []
          this.pageObj.total = result.totalCount
          if (result.data.length / this.pageObj.pageSize === 0) {
            if (this.pageObj.pageIndex > 1) {
              this.pageObj.pageIndex--
              this.getData()
            }
          }
        } else {
          this.$Message.error(`${result.error}`)
        }
      }).catch(err => {
        this.loading = false
        this.$Message.error(`${err}`)
      })
    }
  },
  mounted () {
    this.packageId = this.$route.params.id
    this.getData()
    if (this.hasPermission(['moms:product:paramupdate', 'moms:product:paramdelete'])) {
      this.columns.push({
        title: '操作',
        slot: 'action',
        width: 200
      })
    }
  }
}
</script>
